<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>内置对象简介 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/49.3dceda91.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Javascipt</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/js/01-认识javaScript.html" class="sidebar-link">01-认识javaScript</a></li><li><a href="/./guide/notes/js/02-变量与数据类型介绍.html" class="sidebar-link">02-变量与数据类型介绍</a></li><li><a href="/./guide/notes/js/03-基础dom操作.html" class="sidebar-link">03-基础dom操作</a></li><li><a href="/./guide/notes/js/04-表达式和操作符.html" class="sidebar-link">04-表达式和操作符</a></li><li><a href="/./guide/notes/js/05-判断.html" class="sidebar-link">05-判断</a></li><li><a href="/./guide/notes/js/06-循环.html" class="sidebar-link">06-循环</a></li><li><a href="/./guide/notes/js/07-算法拓展.html" class="sidebar-link">07-算法拓展</a></li><li><a href="/./guide/notes/js/08-函数.html" class="sidebar-link">08-函数</a></li><li><a href="/./guide/notes/js/09-作用域,闭包,预解析.html" class="sidebar-link">09-作用域,闭包,预解析</a></li><li><a href="/./guide/notes/js/10-数组.html" class="active sidebar-link">10-数组</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/js/10-数组.html#内置对象简介" class="sidebar-link">内置对象简介</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/10-数组.html#_1-什么是数组" class="sidebar-link">1.什么是数组</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/10-数组.html#_2-数组的定义和简介" class="sidebar-link">2.数组的定义和简介</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/10-数组.html#_3-数组的方法" class="sidebar-link">3.数组的方法</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/10-数组.html#_4-数组遍历" class="sidebar-link">4.数组遍历</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/10-数组.html#数组的方法清单" class="sidebar-link">数组的方法清单</a></li></ul></li><li><a href="/./guide/notes/js/11-字符串.html" class="sidebar-link">11-字符串</a></li><li><a href="/./guide/notes/js/12-类型转换.html" class="sidebar-link">12-类型转换</a></li><li><a href="/./guide/notes/js/13-DOM进阶.html" class="sidebar-link">13-DOM进阶</a></li><li><a href="/./guide/notes/js/14-dom事件与机制.html" class="sidebar-link">14-dom事件与机制</a></li><li><a href="/./guide/notes/js/15-浏览器M操作.html" class="sidebar-link">15-浏览器M操作</a></li><li><a href="/./guide/notes/js/16-toProject.html" class="sidebar-link">16-toProject</a></li><li><a href="/./guide/notes/js/17-内置数学和时间project.html" class="sidebar-link">17-内置数学和时间project</a></li><li><a href="/./guide/notes/js/18-各种距离宽高获取.html" class="sidebar-link">18-各种距离宽高获取</a></li><li><a href="/./guide/notes/js/19-正则表达式.html" class="sidebar-link">19-正则表达式</a></li><li><a href="/./guide/notes/js/21-箭头函数.html" class="sidebar-link">20箭头函数</a></li><li><a href="/./guide/notes/js/22-解构赋值.html" class="sidebar-link">21-解构赋值</a></li><li><a href="/./guide/notes/js/23-project字面量增强和函数默认参数.html" class="sidebar-link">22-project字面量增强和函数默认参数</a></li><li><a href="/./guide/notes/js/24-剩余参数和展开运算符.html" class="sidebar-link">23-剩余参数和展开运算符</a></li><li><a href="/./guide/notes/js/25-Set 和 Map数据结构和Symbol.html" class="sidebar-link">24-Set 和 Map数据结构和Symbol</a></li><li><a href="/./guide/notes/js/26-遍历器和for-of循环.html" class="sidebar-link">25-遍历器和for-of循环</a></li><li><a href="/./guide/notes/js/27-Promise.html" class="sidebar-link">26-Promise</a></li><li><a href="/./guide/notes/js/28-Clsss类.html" class="sidebar-link">27-Clsss类</a></li><li><a href="/./guide/notes/js/29-module模块.html" class="sidebar-link">28-module模块</a></li><li><a href="/./guide/notes/js/30-Babel.html" class="sidebar-link">29-Babel</a></li><li><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html" class="sidebar-link">30-前后端通信和HTTP协议</a></li><li><a href="/./guide/notes/js/32-本地存储.html" class="sidebar-link">31-本地存储</a></li><li><a href="/./guide/notes/js/33-ajax.html" class="sidebar-link">32-ajax</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="内置对象简介"><a href="#内置对象简介" class="header-anchor">#</a> 内置对象简介</h2> <blockquote><p>JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。</p></blockquote> <blockquote><p>前面两种对象：是JS的基础内容，属于 ECMAScript； 第三个浏览器对象：属于JS独有，即 JS 内置的API。</p></blockquote> <p><strong>内置对象</strong>：就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用或者最基本而必要的功能（属性和方法）。</p> <p>内置对象最大的优点就是帮助我们快速开发。</p> <p><strong>JavaScript的内置对象</strong>：</p> <table><thead><tr><th style="text-align:left;">内置对象</th> <th style="text-align:left;">对象说明</th></tr></thead> <tbody><tr><td style="text-align:left;">Arguments</td> <td style="text-align:left;">函数参数集合</td></tr> <tr><td style="text-align:left;">Array</td> <td style="text-align:left;">数组</td></tr> <tr><td style="text-align:left;">Boolean</td> <td style="text-align:left;">布尔对象</td></tr> <tr><td style="text-align:left;">Math</td> <td style="text-align:left;">数学对象</td></tr> <tr><td style="text-align:left;">Date</td> <td style="text-align:left;">日期时间</td></tr> <tr><td style="text-align:left;">Error</td> <td style="text-align:left;">异常对象</td></tr> <tr><td style="text-align:left;">Function</td> <td style="text-align:left;">函数构造器</td></tr> <tr><td style="text-align:left;">Number</td> <td style="text-align:left;">数值对象</td></tr> <tr><td style="text-align:left;">Object</td> <td style="text-align:left;">基础对象</td></tr> <tr><td style="text-align:left;">RegExp</td> <td style="text-align:left;">正则表达式对象</td></tr> <tr><td style="text-align:left;">String</td> <td style="text-align:left;">字符串对象</td></tr></tbody></table> <h2 id="_1-什么是数组"><a href="#_1-什么是数组" class="header-anchor">#</a> 1.什么是数组</h2> <blockquote><p>编程时，我们经常会遇见处理“<strong>—组数值</strong>”的情况，比如全班10个学生的考试成绩</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a0 <span class="token operator">=</span> <span class="token number">96</span><span class="token punctuation">,</span>a1 <span class="token operator">=</span> <span class="token number">97</span><span class="token punctuation">,</span> a2 <span class="token operator">=</span> <span class="token number">76</span><span class="token punctuation">,</span>a3 <span class="token operator">=</span> <span class="token number">87</span><span class="token punctuation">,</span>a4 <span class="token operator">=</span> <span class="token number">87</span><span class="token punctuation">,</span>a5 <span class="token operator">=</span> <span class="token number">90</span><span class="token punctuation">,</span> a6 <span class="token operator">=</span> <span class="token number">91</span><span class="token punctuation">,</span> a7 <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">,</span>a8 <span class="token operator">=</span> <span class="token number">78</span><span class="token punctuation">,</span>a9 <span class="token operator">=</span> <span class="token number">56</span><span class="token punctuation">;</span>
<span class="token comment">//错误的做法</span>
<span class="token comment">//无法对这些数据进行批量操作  比如计算这些数据的总和和平均分  for循环无从下手</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>数组(Array)，顾名思义，用来存储一组相关的值，从而方便进行求和、计算平均数、逐项遍历等操作。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> scoreArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">96</span><span class="token punctuation">,</span> <span class="token number">97</span><span class="token punctuation">,</span> <span class="token number">76</span><span class="token punctuation">,</span> <span class="token number">87</span><span class="token punctuation">,</span> <span class="token number">87</span><span class="token punctuation">,</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="token number">91</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">78</span><span class="token punctuation">,</span> <span class="token number">56</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>每种高级编程语言中都有数组，它是非常重要的<strong>一种数据结构</strong></p> <p>数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据（尤其是<strong>列表数据</strong>），使用频率非常高。</p> <p><img src="http://img.smyhvae.com/20200612_1707.png" alt=""></p> <p>比如说，上面这个页面的列表数据，它的结构就是一个大数组。</p> <p>数组中的元素可以是任意的数据类型，也可以是对象，也可以是函数，也可以是数组。数组的元素中，如果存放的是数组，我们就称这种数组为二维数组。</p> <p>接下来，我们讲一讲数组的基本操作。</p> <h2 id="_2-数组的定义和简介"><a href="#_2-数组的定义和简介" class="header-anchor">#</a> 2.数组的定义和简介</h2> <h3 id="定义方法1"><a href="#定义方法1" class="header-anchor">#</a> 定义方法1</h3> <blockquote><p><strong>使用数组字面量表示法</strong></p> <p>由一对包含数组项的<strong>方括号 []</strong> 表示, 多个数组项之间以逗号隔开。</p> <p>最简单，也用得最多。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 创建一个空的数组</span>

<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//有四项 长度为4</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="定义方法2"><a href="#定义方法2" class="header-anchor">#</a> 定义方法2</h3> <blockquote><p><strong>使用Array构造函数</strong></p> <p>如果参数是<strong>一个数值</strong>时，表示数组的长度；如果有<strong>多个参数</strong>时，表示数组中的元素。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>注意这种方法如果我们只写一个数字作为参数</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//4</span>
<span class="token comment">// 表示生成一个四个项的数组，每个位置都是空值。</span>


<span class="token comment">//Array()作为构造函数，行为很不一致。</span>
<span class="token comment">//因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="定义方法3"><a href="#定义方法3" class="header-anchor">#</a> 定义方法3</h3> <blockquote><p><strong>Array.of()：创建数组</strong></p></blockquote> <p><strong>语法</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>value1<span class="token punctuation">,</span> value2<span class="token punctuation">,</span> value3<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>作用</strong>：根据参数里的内容，创建数组。</p> <p><strong>举例</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'abc'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果是数组：[1, &quot;abc&quot;, true]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>补充：<code>new Array()</code>和 <code>Array.of()</code>的区别在于：</strong></p> <p>当参数只有一个时，前者表示数组的长度，后者表示数组中的内容。</p> <h3 id="访问数组项"><a href="#访问数组项" class="header-anchor">#</a> 访问数组项</h3> <blockquote><p>数组每一项都有<strong>下标</strong> , 下标从0开始</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//下标分别是  0  1  2  3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>使用方括号中 <strong>书写下标</strong> 的形式 <strong>访问</strong>数组的项</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>


console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>下标越界</strong></p> <blockquote><p>JavaScript规定，<strong>访问数组中不存在的项会返回undefined</strong>，不会报错</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">10000</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="更改数组项"><a href="#更改数组项" class="header-anchor">#</a> 更改数组项</h3> <blockquote><p>数组并不是只读的，我们可以修改它其中任何项的值</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">++</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3 6 2 0</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>如果<strong>更改的数组项超过了length-1</strong>，则会<strong>创造这项</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><a href="https://imgchr.com/i/0k8SaV" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/09/27/0k8SaV.png" alt="0k8SaV.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="数组的长度"><a href="#数组的长度" class="header-anchor">#</a> 数组的长度</h3> <blockquote><p>数组的length属性表示它的长度</p></blockquote> <p><strong>数组最后一项的下标是数组的长度减1</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//4</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">//D</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><code>length</code>属性是可写的。</p> <p>如果人为<strong>设置<code>length</code>小于当前成员个数的值</strong>，该数组的成员数量会<strong>自动减少到<code>length</code>设置的值。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//4</span>

arr<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2]  数组长度可改变 数组内容也发生改变</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>人为<strong>设置<code>length</code>大于当前元素个数</strong>，则数组的成员数量会增加到这个值<strong>新增的位置都是空位。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>清空数组</strong>的一个有效方法，就是将**<code>length</code>属性设为0。**</p> <h3 id="数组的遍历"><a href="#数组的遍历" class="header-anchor">#</a> 数组的遍历</h3> <blockquote><p>数组的最大的优点就是<strong>方便遍历</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="数组的检测"><a href="#数组的检测" class="header-anchor">#</a> 数组的检测</h3> <blockquote><p><code>Array.isArray</code>方法返回一个布尔值，表示参数是否为数组。</p> <p>可以弥补<code>typeof</code>运算符的不足。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>


console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">typeof</span> arr <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// &quot;object&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// true</span>

<span class="token comment">//typeof运算符只能显示数组的类型是Object</span>
<span class="token comment">//而Array.isArray方法可以识别数组。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> b <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&quot;p&quot;</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false </span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false </span>
        <span class="token comment">//类数组不能检测</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="tostring"><a href="#tostring" class="header-anchor">#</a> toString()</h3> <blockquote><p><strong>数组转换为字符串</strong></p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>字符串 = 数组.toString();
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>解释：把数组转换成字符串，每一项用<code>,</code>分割。</p> <p>备注：<strong>大多数的数据类型都可以使用<code>.toString()</code>方法，将其转换为字符串。</strong></p> <p>**知识点补充：**将数组转换为字符串，有哪些方式</p> <p>方式 1：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>字符串 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>方式 2：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>字符串 <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>数组<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>方式 3：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>字符串 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//  将数组转为字符串，每一项用 英文逗号 分隔</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="array-from"><a href="#array-from" class="header-anchor">#</a> Array.from()</h3> <blockquote><p><strong>作用：将伪数组或可遍历对象转换为真数组。</strong></p> <p>可遍历的  ===&gt; 数组,字符串,Set.Map.NodeList,arguments以及拥有length属性的任意对象</p> <p>另外，伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有数组的一般方法，比如 pop()、join() 等方法。</p></blockquote> <p><strong>语法</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>array <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>arrayLike<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'yunmudsb'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果是数组：[&quot;y&quot;,&quot;u&quot;,&quot;n&quot;,&quot;m&quot;,&quot;u&quot;,&quot;d&quot;,&quot;s&quot;,&quot;b&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>伪数组举例</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>按钮1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>按钮2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>按钮3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">let</span> btnArray <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>btnArray<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>btnArray<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>上面的布局中，有三个 button 标签，我们通过<code>getElementsByTagName</code>获取到的<code>btnArray</code>实际上是<strong>伪数组</strong>，并不是真实的数组：</p> <p><a href="https://imgchr.com/i/0U3mDS" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/10/06/0U3mDS.png" alt="0U3mDS.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>既然<code>btnArray</code>是伪数组，它就不能使用数组的一般方法，否则会报错：</p> <p><strong>解决办法</strong>：采用<code>Array.from</code>方法将<code>btnArray</code>这个伪数组转换为真数组即可：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>btnArray<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>然后就可以使用数组的一般方法了：</p> <p><a href="https://imgchr.com/i/0U3PNd" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/10/06/0U3PNd.png" alt="0U3PNd.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_3-数组的方法"><a href="#_3-数组的方法" class="header-anchor">#</a> 3.数组的方法</h2> <h3 id="数组的头尾操作方法"><a href="#数组的头尾操作方法" class="header-anchor">#</a> 数组的头尾操作方法</h3> <p><a href="https://imgchr.com/i/0kGHXj" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/09/27/0kGHXj.png" alt="0kGHXj.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="push方法"><a href="#push方法" class="header-anchor">#</a> push方法</h4> <blockquote><p>push()方法用来<strong>在数组末尾推入新项</strong>，参数就是要推入的项 , 并<strong>返回添加新元素后的数组长度</strong>。</p> <p>如果要推入多项，可以用逗号隔开</p> <p>调用push()方法后，<strong>原先数组会立即改变</strong>，不需要赋值</p></blockquote> <p><strong>语法：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>新数组的长度 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>元素<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 方法就是打点调用的函数 , 所以是数组打点调用他们</span>
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">55</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">66</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">77</span> <span class="token punctuation">,</span> <span class="token number">88</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [11, 22, 33, 44, 55, 66, 77, 88]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="pop方法"><a href="#pop方法" class="header-anchor">#</a> pop方法</h4> <blockquote><p>用于<strong>删除</strong>数组的<strong>最后一个元素</strong>，并<strong>返回被删除的这个元素</strong>。</p> <p>注意，该方法<strong>会改变原数组</strong></p></blockquote> <p>语法：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>被删除的元素 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 方法就是打点调用的函数 , 所以是数组打点调用他们</span>
<span class="token keyword">let</span> del <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[11, 22, 33]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>del<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//44</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="unshift-方法"><a href="#unshift-方法" class="header-anchor">#</a> unshift()方法</h4> <blockquote><p>用于在数组的<strong>第一个位置添加元素</strong>，并返回添加新元素后的数组长度。插入元素后，其他元素的索引会依次调整。</p> <p>注意，该方法<strong>会改变原数组。</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">,</span><span class="token number">16</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> size <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token number">100</span> <span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[100, 110, 1, 8, 9, 16]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//6</span>

<span class="token comment">//unshift()方法可以接受多个参数，这些参数都会添加到目标数组头部。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="shift"><a href="#shift" class="header-anchor">#</a> shift()</h4> <blockquote><p>删除数组中的<strong>第一个</strong>元素，返回结果为<strong>被删除的元素</strong>。</p> <p>注意，该方法会<strong>改变原数组</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;夕颜&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;大鱼&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> del <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[&quot;夕颜&quot;, &quot;大鱼&quot;]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>del<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//云牧</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="splice"><a href="#splice" class="header-anchor">#</a> splice()</h3> <blockquote><p><strong>splice()方法用于替换数组中的指定项</strong></p> <p>注意，该方法会改变原数组。</p></blockquote> <p><strong>语法：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>新数组 <span class="token operator">=</span> 原数组<span class="token punctuation">.</span><span class="token function">splice</span> <span class="token punctuation">(</span>删除起始索引index（从<span class="token number">0</span>开始）<span class="token punctuation">,</span> 需要删除的个数<span class="token punctuation">)</span><span class="token punctuation">;</span>

新数组 <span class="token operator">=</span> 原数组<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>删除起始索引index（从<span class="token number">0</span>开始）<span class="token punctuation">,</span> 需要删除的个数<span class="token punctuation">,</span> 新的元素<span class="token number">1</span><span class="token punctuation">,</span> 新的元素<span class="token number">2.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//上方语法中，第三个及之后的参数，表示：删除元素之后，向原数组中添加新的元素，这些元素将会自动插入到起始位置索引的前面。也可以理解成：删除了哪些元素，就在那些元素的所在位置补充新的内容</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>slice()</code>方法和<code>splice()</code>方法很容易搞混，请一定要注意区分。</p> <p><strong>举例 1：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span>  arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;d&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//只写一个参数默认从起始索引(包含)往后删除</span>
arr1<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//[&quot;a&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>举例 2：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr2<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//删除最后两个元素</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>举例 3：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr3<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//从索引为1的位置(包含)开始删除元素,一共删除三个元素</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [&quot;a&quot;, &quot;e&quot;, &quot;f&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>举例 4：</strong>（我们来看看<strong>第三个参数</strong>的用法）在<strong>指定位置插入新项</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr4 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">44</span> <span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">,</span> <span class="token number">66</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr4<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">99</span><span class="token punctuation">,</span> <span class="token number">88</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//插入原来下标为3的项的前面</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr4<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//[11, 22, 33, 99, 88, 77, 44, 55, 66]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>举例 5：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr5 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素</span>
arr5<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'云牧'</span><span class="token punctuation">,</span> <span class="token string">'夕颜'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[&quot;a&quot;, &quot;云牧&quot;, &quot;夕颜&quot;, &quot;e&quot;, &quot;f&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>splice()方法会以数组形式返回被删除替换的项</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span>  arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;d&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// [&quot;b&quot; , &quot;c&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="slice"><a href="#slice" class="header-anchor">#</a> slice()</h3> <blockquote><p><code>slice()</code>方法用于得到<strong>子数组</strong></p> <p>slice(a,b)截取的子数组从<strong>下标为a的项开始，到下标为b(但不包括下标为b的项）结束</strong></p> <p>返回一个新数组，原数组不变。</p> <p>slice()如果不提供第二个参数，则表示从指定项开始，<strong>提取所有后续所有项作为子数组</strong></p> <p>slice()方法的参数允许为负数，<strong>表示数组的倒数第几项</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> colors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;red&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;green&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;blue&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;yellow&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newColors1 <span class="token operator">=</span> colors<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 不加参数时，则获取所有的元素。相当于数组的整体赋值</span>
<span class="token keyword">let</span> newColors2 <span class="token operator">=</span> colors<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 从第一个值开始提取，直到末尾</span>
<span class="token keyword">let</span> newColors3 <span class="token operator">=</span> colors<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 提取最后两个元素 </span>
<span class="token comment">//如果slice方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。</span>
<span class="token keyword">let</span> newColors4 <span class="token operator">=</span> colors<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 提取从第二个到第四个之间的元素（不包括第四个元素）</span>
<span class="token keyword">let</span> newColors5 <span class="token operator">=</span> colors<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 空</span>
<span class="token keyword">let</span> newColors6 <span class="token operator">=</span> colors<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newColors1<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newColors2<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newColors3<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newColors4<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newColors5<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newColors6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//结果如下图</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><a href="https://imgchr.com/i/0UtkOx" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/10/06/0UtkOx.md.png" alt="0UtkOx.md.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="fill"><a href="#fill" class="header-anchor">#</a> fill()</h3> <blockquote><p><code>fill()</code>：用一个固定值填充数组，返回结果为<strong>新的数组</strong>。不会改变原数组。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 用一个固定值填充数组。数组里的每个元素都会被这个固定值填充</span>
新数组 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span>固定值<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 从 startIndex 开始的数组元素，用固定值填充</span>
新数组 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span>固定值<span class="token punctuation">,</span> startIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 从 startIndex 到 endIndex 之间的元素（包左不包右），用固定值填充</span>
新数组 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span>固定值<span class="token punctuation">,</span> startIndex<span class="token punctuation">,</span> endIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>举例：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 创建一个长度为4的空数组，然后用 'f' 来填充这个空数组</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token string">'f'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['f', 'f', 'f,' 'f']</span>

<span class="token comment">// 将现有数组的每一个元素都进行填充</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token string">'f'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['f', 'f', 'f,' 'f']</span>

 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token string">'f'</span> <span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [&quot;a&quot;, &quot;f&quot;, &quot;f&quot;, &quot;f&quot;]</span>

<span class="token comment">// 指定位置进行填充</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token string">'f'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [&quot;a&quot;, &quot;f&quot;, &quot;f&quot;, &quot;d&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="join-和split"><a href="#join-和split" class="header-anchor">#</a> join()和split()</h3> <blockquote><p>数组的join()方法可以   <strong>使数组转为字符串</strong>;          不改变原数组</p> <p>字符串的split()方法可以 <strong>使字符串转为数组。</strong>    不改变原字符串</p></blockquote> <p><a href="https://imgchr.com/i/0Aif4x" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/09/27/0Aif4x.png" alt="0Aif4x.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>join()的参数表示<strong>以什么字符作为连接符</strong>，如果留空则默认<strong>以逗号分隔</strong>，如同调用toString()方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr  <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newStr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//等同于arr.join(&quot;,&quot;);</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//11,22,33,44</span>

<span class="token comment">//如同arr.toString();</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> newStr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//11223344</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> newStr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//11-22-33-44</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> newStr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;❤&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//11❤22❤33❤44</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> newStr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;|&quot;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//11|22|33|44</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>split()的参数表示以什么字符<strong>拆分字符串</strong>，<strong>一般不能留空</strong></p> <blockquote><p>注意，<code>split()</code>是字符串的方法，不是数组的方法。</p></blockquote> <p><strong>代码举例 1</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//如果省略参数，则返回数组的唯一成员就是原字符串。</span>
<span class="token keyword">let</span> str  <span class="token operator">=</span> <span class="token string">&quot;abcdefg&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newArr <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//[&quot;abcdefg&quot;]  数组只有原来字符串这一项</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>代码举例 2</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'yunmu, mu, shuai, bi'</span><span class="token punctuation">;</span> <span class="token comment">// 用逗号隔开的字符串</span>

<span class="token keyword">let</span> newArr <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 将字符串 str 拆分成数组，通过逗号来拆分</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// [&quot;yunmu&quot;, &quot; mu&quot;, &quot; shuai&quot;, &quot; bi&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>代表举例 3:</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;2020-11-11&quot;</span><span class="token punctuation">;</span>


console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 无参数，表示：把整个字符串作为一个元素添加到数组中。</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 参数为空字符串，则表示：分隔字符串中每一个字符，分别添加到数组中</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 参数为指定字符，表示：用 '-' 分隔字符串。此分隔符将不会出现在数组的任意一个元素中</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 同上</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><img src="https://s1.ax1x.com/2020/10/06/0URgL8.png" alt="0URgL8.png"></p> <p><strong>备注</strong>：<code>split()</code>这个方法在实际开发中用得非常多。一般来说，从接口拿到的 json 数据中，经常会收到类似于<code>&quot;y, u, n&quot;</code>这样的字符串，前端需要将这个字符串拆分成<code>['y', 'u', 'n']</code>数组，这个时候<code>split()</code>方法就派上用场了</p> <h3 id="concat方法"><a href="#concat方法" class="header-anchor">#</a> concat方法</h3> <blockquote><p>concat方法用于<strong>多个数组的合并。</strong></p> <p>它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，<strong>原数组不变。</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;d&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;e&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;f&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;g&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;h&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> newArr <span class="token operator">=</span> arr1<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>arr2 <span class="token punctuation">,</span> arr3 <span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;, &quot;g&quot;, &quot;h&quot;, 1, 2, 3]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token string">'hello'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'world'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'!'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token comment">// [&quot;hello&quot;, &quot;world&quot;, &quot;!&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="sort"><a href="#sort" class="header-anchor">#</a> sort()</h3> <blockquote><p>数组排序可以使用sort()方法 ， 这个方法的参数又是一个函数。</p> <p><code>sort()</code>方法不是按照大小排序，默认是按照字典顺序排序。数值会被先转成字符串，再按照字典顺序进行比较，排序后，<strong>原数组将被改变。</strong></p></blockquote> <h4 id="sort-方法-无参时"><a href="#sort-方法-无参时" class="header-anchor">#</a> sort()方法：无参时</h4> <p><strong>举例 1</strong>：（当数组中的元素为字符串时）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr1<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 将数组 arr1 进行排序</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&quot;f&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>举例 2</strong>：（当数组中的元素为数字时）</p> <blockquote><p>如果在使用 sort() 方法时不带参，则默认按照<strong>Unicode 编码</strong>，从小到大进行排序。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr2<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 将数组 arr2 进行排序</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[1,11,2,3,4,5]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上方的打印结果中，你会发现，使用 sort() 排序后，数字<code>11</code>竟然在数字<code>2</code>的前面。这是为啥呢？因为上面讲到了，<code>sort()</code>方法是按照<strong>Unicode 编码</strong>进行排序的。</p> <p>那如果我想让 arr2 里的数字，完全按照从小到大排序，怎么操作呢？继续往下看</p> <h4 id="sort-方法-带参时-自定义排序规则"><a href="#sort-方法-带参时-自定义排序规则" class="header-anchor">#</a> sort()方法：带参时，自定义排序规则</h4> <p>如果在 sort()方法中带参，我们就可以<strong>自定义</strong>排序规则。具体做法如下：</p> <p>sort的参数函数本身接受两个参数，表示进行比较的两个数组成员。如果该函数的返回值大于0，表示第一个成员排在第二个成员后面；其他情况下，都是第一个元素排在第二个元素前面。</p> <p>浏览器根据<strong>回调函数的返回值return来决定元素的排序</strong>：（重要）</p> <ul><li>如果返回一个大于 0 的值，则元素会交换位置</li> <li><strong>如果返回一个小于 0 的值，则元素位置不变</strong></li> <li>如果返回一个等于 0 的值，则认为两个元素相等，则不交换位置</li></ul> <p>如果只是看上面的文字，可能不太好理解，我们来看看下面的例子，你肯定就能明白。</p> <p><strong>举例：将数组中的数字按照从小到大排序</strong></p> <p><strong>写法 1</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 自定义排序规则</span>
<span class="token comment">//这个函数中的a、b分别表示数组中靠前和靠后的项</span>
arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">&gt;</span> b<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 如果 a 大于 b，则交换 a 和 b 的位置</span>
        <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">&lt;</span> b<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 如果 a 小于 b，则位置不变</span>
        <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token comment">// 如果 a 等于 b，则位置不变</span>
        <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[1, 2, 3, 4, 5, 11]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><strong>写法2</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token punctuation">,</span> b</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">//会使得原数组变成升序</span>
arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token punctuation">,</span> b</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span>  b <span class="token operator">-</span> a<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">//会使得原数组变成降序</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>反序</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//使得原数组反序</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>随机排序</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token punctuation">,</span> b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">0.5</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">)</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="sort-方法举例-将数组从小到大排序"><a href="#sort-方法举例-将数组从小到大排序" class="header-anchor">#</a> sort 方法举例：将数组从小到大排序</h4> <p>将数组从小到大排序，这个例子很常见。但在实际开发中，总会有一些花样。</p> <p>下面这段代码，在实际开发中，经常用到，一定要掌握。完整代码如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> dataList <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;品牌鞋子，高品质低价入手&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">publishTime</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;不是很贵，但是很暖&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">publishTime</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;无法拒绝的美食，跟我一起吃吃&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">publishTime</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;yunmudsb 排序前的数组：&quot;</span><span class="token punctuation">,</span> dataList<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 将dataList 数组，按照 publishTime 字段，从小到大排序。（会改变原数组）</span>
    dataList<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>publishTime<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>publishTime<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//一般是后台接口返回给前端的 统一先做一次 partInt() 比较保险。这是一种良好的工作习惯。</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;yunmudsb 排序后的数组&quot;</span><span class="token punctuation">,</span> dataList<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>yunmudsb 排序前的数组： <span class="token punctuation">[</span>
    <span class="token punctuation">{</span><span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span><span class="token string">&quot;品牌鞋子，高品质低价入手&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;publishTime&quot;</span><span class="token operator">:</span><span class="token number">200</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span><span class="token string">&quot;不是很贵，但是很暖&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;publishTime&quot;</span><span class="token operator">:</span><span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span><span class="token string">&quot;无法拒绝的美食，跟我一起吃吃&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;publishTime&quot;</span><span class="token operator">:</span><span class="token number">300</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span>

yunmudsb 排序后的数组： <span class="token punctuation">[</span>
    <span class="token punctuation">{</span><span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span><span class="token string">&quot;不是很贵，但是很暖&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;publishTime&quot;</span><span class="token operator">:</span><span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span><span class="token string">&quot;品牌鞋子，高品质低价入手&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;publishTime&quot;</span><span class="token operator">:</span><span class="token number">200</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span><span class="token string">&quot;无法拒绝的美食，跟我一起吃吃&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;publishTime&quot;</span><span class="token operator">:</span><span class="token number">300</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="reverse"><a href="#reverse" class="header-anchor">#</a> reverse()</h3> <blockquote><p><code>reverse</code>方法用于<strong>置反排列数组元素</strong>，返回改变后的数组。</p> <p>注意，该方法将<strong>改变原数组</strong>。</p></blockquote> <p><strong>语法：</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>反转后的数组 = 数组.reverse();
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>举例：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> b <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// [&quot;c&quot;, &quot;b&quot;, &quot;a&quot;]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// [&quot;c&quot;, &quot;b&quot;, &quot;a&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>题目</strong></p> <blockquote><p>如何把ABCDEFG字符串置反</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;ABCDEFG&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newArr <span class="token operator">=</span>  str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

newArr<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newStr <span class="token operator">=</span> newArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[&quot;G&quot;, &quot;F&quot;, &quot;E&quot;, &quot;D&quot;, &quot;C&quot;, &quot;B&quot;, &quot;A&quot;]</span>
 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//GFEDCBA</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="indexof-和-lastindexof"><a href="#indexof-和-lastindexof" class="header-anchor">#</a> indexOf()和 lastIndexOf()</h3> <blockquote><p>indexof()方法的功能是<strong>搜索数组中的元素</strong>，并返回它所在的位置，如果元素不存在，则返回-1</p></blockquote> <p><strong>语法 1</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>索引值 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>想要查询的元素<span class="token punctuation">)</span><span class="token punctuation">;</span>

索引值 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span>想要查询的元素<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>备注：</strong><code>indexOf()</code> 是从前向后查找元素的位置。</p> <p>​			同理，<code>lastIndexOf()</code>是从后向前寻找。返回给定元素在数组中最后一次出现的位置</p> <p>这个方法的作用：</p> <ul><li><strong>如果获取的索引值为 0，说明数组是以查询的元素为开头的</strong>。</li> <li>如果获取的索引值为-1，说明这个数组中没有指定的元素。</li></ul> <p><strong>注意</strong>：<code>indexOf()</code>在检索时，是严格类型约束，类似于<code>===</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'c'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2  从前往后，找第一个&quot;c&quot;在哪个位置</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'d'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 5 从后往前，找第一个&quot;d&quot;在哪个位置</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> pos <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pos<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//-1  没有查找到为-1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>注意</strong>，这两个方法不能用来搜索<code>NaN</code>的位置，即它们无法确定数组成员是否包含<code>NaN</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token number">NaN</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span> <span class="token comment">// -1</span>
<span class="token punctuation">[</span><span class="token number">NaN</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span> <span class="token comment">// -1</span>

<span class="token comment">//这是因为这两个方法内部，使用严格相等运算符（===）进行比较，而NaN是唯一一个不等于自身的值。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>语法 2</strong>：</p> <p><code>indexOf</code>方法还可以接受第二个参数，表示<strong>搜索的开始位置。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>索引值 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>想要查询的元素<span class="token punctuation">,</span> <span class="token punctuation">[</span>起始位置<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'q'</span><span class="token punctuation">,</span> <span class="token string">'i'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'n'</span><span class="token punctuation">,</span> <span class="token string">'g'</span><span class="token punctuation">,</span> <span class="token string">'u'</span><span class="token punctuation">,</span> <span class="token string">'y'</span><span class="token punctuation">,</span> <span class="token string">'i'</span><span class="token punctuation">,</span> <span class="token string">'h'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'o'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 从第三个位置开始查找 'a'这个元素 【重要】</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果：9</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="includes"><a href="#includes" class="header-anchor">#</a> includes()</h3> <blockquote><p>includes()方法的功能是<strong>判断一个数组是否包含一个指定的值</strong>，返回布尔值</p></blockquote> <p><strong>语法</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>布尔值 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>想要查找的元素<span class="token punctuation">,</span> <span class="token punctuation">[</span>position<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果：true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果：false</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果：false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>includes()方法的第二个参数表示<strong>搜索的起始位置</strong>，默认为<code>0</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// false</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>基本遵循严格相等(===）,但是对于NaN的判断与===不同，<strong>includes认为NaN=== NaN</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">NaN</span> <span class="token operator">===</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>面试小题</strong></p> <blockquote><p>完成以下代码段  实现b数组对a数组的拷贝 方法越多越好</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span>  a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;123&quot;</span><span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span>  b<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//方法一</span>
b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>a<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    b<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 方法二</span>
b  <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 方法三</span>
b <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 方法四</span>
b <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//会改变原数组</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="_4-数组遍历"><a href="#_4-数组遍历" class="header-anchor">#</a> 4.数组遍历</h2> <h3 id="遍历相关算法"><a href="#遍历相关算法" class="header-anchor">#</a> 遍历相关算法</h3> <h4 id="题目1"><a href="#题目1" class="header-anchor">#</a> 题目1</h4> <blockquote><p><strong>求数组中每一项的总和、平均数</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 求数组的总和</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span>  <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 累加器</span>
<span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token comment">// 遍历数组  每遍历到一个数字  就把这个数字累加到累加器之中</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    sum <span class="token operator">+=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sum <span class="token operator">/</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h4 id="题目2"><a href="#题目2" class="header-anchor">#</a> 题目2</h4> <blockquote><p><strong>求数组的最大值和最小值</strong></p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">46</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">56</span><span class="token punctuation">,</span> <span class="token number">98</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>


    <span class="token comment">// 定义两个变量  max表示当前寻找到的最大值  默认是arr[0]</span>
    <span class="token comment">//			   min表示当前寻找到的最小值  默认是arr[0]</span>
    <span class="token keyword">let</span> max <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">let</span> min <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>


    <span class="token comment">//  遍历数组  从下标为1的项开始遍历</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 如果你遍历的这项 比当前最大值大  那么就让当前最大值成为这个项</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&gt;</span> max<span class="token punctuation">)</span><span class="token punctuation">{</span>
            max <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&lt;</span> min<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 否则如果你遍历的这项 比当前最小值小  那么就让当前最小值成为这个项</span>
            min <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>max <span class="token punctuation">,</span> min<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="翻转数组"><a href="#翻转数组" class="header-anchor">#</a> 翻转数组</h3> <p><strong>方式 1：</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 原始数组</span>
    
    
    <span class="token keyword">function</span> <span class="token function">reverseArr</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            newArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">return</span> newArr<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">reverseArr</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">//或者</span>
    <span class="token keyword">function</span> <span class="token function">reverseArr</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            newArr<span class="token punctuation">[</span>newArr<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">return</span> newArr<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p><strong>方式 2：（算法里比较常见的方式）</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">reverseArr</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
        arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">-</span> i<span class="token punctuation">]</span><span class="token punctuation">;</span>
        arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">-</span> i<span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> arr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="清空数组"><a href="#清空数组" class="header-anchor">#</a> 清空数组</h3> <blockquote><p>清空数组，有以下几种方式：</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//方式1：删除数组中所有项目</span>
arr<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">//方式2：length属性可以赋值，在其它语言中length是只读</span>
arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//方式3：推荐</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="数组去重"><a href="#数组去重" class="header-anchor">#</a> 数组去重</h3> <blockquote><p><strong>去掉数组中的重复项</strong></p></blockquote> <p>思路:准备一个<strong>空结果数组</strong>，<strong>遍历原数组</strong>，如果遍<strong>历到的项不在结果数组中</strong>，则<strong>推入结果数组</strong>。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token comment">// 结果数组</span>
    <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token comment">// 遍历原数组</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 判断遍历到的这项是否在结果数组中 如果不在就推入</span>
        <span class="token comment">// includes方法用来判断某项是否在数组中</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>result<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="随机样本"><a href="#随机样本" class="header-anchor">#</a> 随机样本</h3> <blockquote><p><strong>请随机从原数组中取3项</strong></p></blockquote> <p>思路:准备一个<strong>空结果数组</strong>，<strong>遍历原数组</strong>，<strong>随机选择一项</strong>，推入结果数组，并且将<strong>这项删除</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">66</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">,</span> <span class="token number">88</span><span class="token punctuation">,</span> <span class="token number">99</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">120</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token comment">// 结果数组</span>
    <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token comment">//   遍历三次取值</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//   随机选择数组一项的下标,数组的下标是 0 ~ arr.length - 1</span>
        <span class="token comment">//   之前学过random的公式  [a, b]区间的随机数是 parseInt(Math.random() * (b-a+1) + a);</span>
        <span class="token keyword">let</span> n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 把这项推入结果数组之中</span>
        result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 删除 这项防止被重复随机到</span>
        arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>n<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="冒泡排序"><a href="#冒泡排序" class="header-anchor">#</a> 冒泡排序</h3> <p><a href="https://imgchr.com/i/0AqRgI" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/09/28/0AqRgI.gif" alt="0AqRgI.gif"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>实现原理</strong></p> <blockquote><p>数组中有n个数，比较每相邻两个数，如果前者大于后者，就把两个数交换位置;这样一来，第一轮就</p> <p>可以选出一个最大的数放在最后面;那么经过n-1(数组的length -1）趟，就完成了所有数的排序。</p> <p><strong>4个数字，共需要比较3趟，比较次数为3+2+1=6次。</strong></p> <p><strong>n个数字，共需要比较n-1趟，比较次数为n(n-1)/2次。</strong></p></blockquote> <p><strong>我们先来实现找数组中的最大数，并把他放到数组最后。</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">&gt;</span> arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">//如果前一个数大于后一个数就交换位置</span>
            <span class="token keyword">let</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
            arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>我们能找到数组中最大的数，放到最后，这样重复 arr.length -1 次，便可以实现数组按从小到大的顺序排好了。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
	
    <span class="token comment">//一趟一趟的比较  趟数的序号就是 i</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token comment">// 内层循环负责两两比较</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">//这里的j &lt; arr.length合适吗? </span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">&gt;</span> arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
               <span class="token comment">//如果前一项 大于后一项 就要交换两个的位置</span>
                <span class="token keyword">let</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
                arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><blockquote><p>虽然上面的代码已经实现冒泡排序了，但就像注释中提到的，内层 for 循环的次数写成 arr.length是不是合适？</p> <p>当第一次，找到最大数，放到最后，那么下一次，遍历的时候，是不是就不能把最后一个数算上了呢？</p> <p>因为他就是最大的了，不会出现，前一个数比后一个数大，要交换位置的情况，所以内层 for 循环的次数，改成  arr.length - i - 1</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
	
    <span class="token comment">//一趟一趟的比较  趟数的序号就是 i</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 内层循环负责两两比较</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 判断项的大小</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">&gt;</span> arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">//如果前一项 大于后一项 就要交换两个的位置</span>
                <span class="token keyword">let</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
                arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// 每一趟输出的数组</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h4 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h4> <blockquote><p>1、外层 for 循环控制循环次数</p> <p>2、内层 for 循环进行两数交换，找每次的最大数，排到最后</p></blockquote> <h3 id="二维数组"><a href="#二维数组" class="header-anchor">#</a> 二维数组</h3> <blockquote><p>以数组作为数组元素的数组，即**“数组的数组&quot;**</p> <p>二维数组可以看做是矩阵</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> matrix <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 
    <span class="token punctuation">[</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 
    <span class="token punctuation">[</span><span class="token number">44</span><span class="token punctuation">,</span> <span class="token number">47</span><span class="token punctuation">,</span> <span class="token number">48</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>matrix<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//4</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 循环输出二维数组每一项</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">4</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>matrix<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>遍历数组的方法还包括：every()、filter()、forEach()、map()等。</p> <p>注意:这几个方法<strong>不会修改原数组</strong>。有了这几种方法，就可以替代一些 for 循环了。下面依次来介绍。</p> <h3 id="foreach"><a href="#foreach" class="header-anchor">#</a> forEach()</h3> <p><code>forEach()</code> 这种遍历方法<strong>只支持 IE8 以上的浏览器</strong>。IE8 及以下的浏览器均不支持该方法。所以如果需要兼容 IE8，则不要使用 forEach，改为使用 for 循环来遍历即可。</p> <p>forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为<strong>回调函数。</strong></p> <p>数组中有几个元素，该回调函数就会执行几次。</p> <p>回调函数中<strong>传递三个参数：</strong></p> <ul><li><p>第一个参数，就是当前<strong>正在遍历的元素</strong></p></li> <li><p>第二个参数，就是当前<strong>正在遍历的元素的索引</strong></p></li> <li><p>第三个参数，就是正在遍历的<strong>数组</strong></p></li></ul> <blockquote><p><strong><code>forEach</code>方法不返回值</strong>，只用来操作数据。</p> <p>如果数组遍历的目的是<strong>为了改变数据得到返回值</strong>，那么<strong>使用<code>map</code>方法</strong>，否则使用<code>forEach</code>方法。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;黛玉&quot;</span> <span class="token punctuation">,</span> <span class="token string">&quot;宝钗&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item <span class="token punctuation">,</span> index <span class="token punctuation">,</span> arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item <span class="token punctuation">,</span> index <span class="token punctuation">,</span> arr<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//一般不需要数组本身arr</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//打印结果</span>
云牧 <span class="token number">0</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;黛玉&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;宝钗&quot;</span><span class="token punctuation">]</span>
黛玉 <span class="token number">1</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;黛玉&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;宝钗&quot;</span><span class="token punctuation">]</span>
宝钗 <span class="token number">2</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;黛玉&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;宝钗&quot;</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><strong>小练习</strong></p> <blockquote><p>弹出对应标签的内容</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>001<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>002<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>003<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>004<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>005<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> aLi <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&quot;ul li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    aLi<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item <span class="token punctuation">,</span> index</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item <span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>
        item<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// alert(index);</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token comment">//打印每一项的内容</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 除了数组forEach之外</span>
<span class="token comment">// querySelectorAll获取的节点列表也可以forEach</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="map"><a href="#map" class="header-anchor">#</a> map</h3> <blockquote><p><code>map</code>方法与<code>forEach</code>方法很相似，也是对数组的所有成员依次执行参数函数。</p> <p>同样传递三个参数 该方法法的参数函数可以接受三个参数：当前成员，当前位置和整个数组。</p> <p><code>map</code>方法将数组的所有成员<strong>依次执行参数函数</strong>，，然后把每一次的执行结果<strong>组成一个新数组返回</strong>。不会改变原数组。</p></blockquote> <p><strong>举例 1</strong>：（拷贝的过程中改变数组元素的值）</p> <p>一个已知的数组 arr1，我要求让 arr1 中的每个元素的值都乘 10，这里就可以用到 map 方法。代码举例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">42</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[120,230,240,420,10];  原数组拷贝了一份，并进行了修改</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//[12,23,24,42,1]；  原数组并未发生变化</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>举例 2</strong>：【重要案例，实际开发中经常用到】</p> <p>将 A 数组中某个属性的值，存储到 B 数组中。代码举例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">&quot;18&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;夕颜&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">&quot;16&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//将数组 arr1 中的 name 属性，存储到 数组 arr2 中</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> arr1<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 将数组 arr1 中的 name、age这两个属性，改一下“键”的名字，存储到 arr3中</span>
<span class="token keyword">let</span> arr3 <span class="token operator">=</span> arr1<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">myName</span><span class="token operator">:</span> item<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
        <span class="token literal-property property">myAge</span><span class="token operator">:</span> item<span class="token punctuation">.</span>age<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span>	<span class="token comment">// [&quot;云牧&quot;, &quot;夕颜&quot;]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">)</span><span class="token punctuation">;</span>	<span class="token comment">// [{&quot;myName&quot;:&quot;云牧&quot;,&quot;myAge&quot;:&quot;18&quot;},{&quot;myName&quot;:&quot;夕颜&quot;,&quot;myAge&quot;:&quot;16&quot;}]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>map 的应用场景，主要就是以上两种。</p> <h3 id="filter"><a href="#filter" class="header-anchor">#</a> filter()</h3> <blockquote><p><code>filter</code>方法用于过滤数组成员，它的参数是一个函数.</p> <p>对数组中的每一项运行回调函数<strong>返回结果为<code>true</code>的成员组成一个新数组返回</strong>,<strong>不会改变原数组</strong>。</p> <p>该方法法的参数函数可以接受三个参数：当前成员，当前位置和整个数组。</p></blockquote> <p><strong>语法：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">28</span> <span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newArr  <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   
    <span class="token keyword">return</span> item <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token comment">//return !(item % 2);</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//找出数组 arr1 中大于 4 的元素，返回一个新的数组。代码如下：</span>
<span class="token keyword">let</span> newArr  <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>item <span class="token operator">&gt;</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// 将arr1中大于4的元素返回，组成新的数组</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

    <span class="token comment">//上方代码更简洁的写法如下：</span>
     <span class="token comment">//return (item &gt; 4);</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p><strong>举例</strong></p> <p>获取数组 A 中指定类型的对象，放到数组 B 中。代码举例如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;许嵩&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;一线&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;周杰伦&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;过气&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;邓紫棋&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;一线&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">&quot;一线&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 筛选出一线歌手</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>打印结果：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'许嵩'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'一线'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'邓紫棋'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'一线'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="every"><a href="#every" class="header-anchor">#</a> every()</h3> <blockquote><p><code>every()</code>：对数组中每一项运行回调函数，如果<strong>都返回 true</strong>，every 就<strong>返回 true</strong>；如果有一项返回 false，则停止遍历，此方法返回 false。</p></blockquote> <p>注意：<strong>every()方法的返回值是 boolean 值，参数是回调函数。</strong></p> <p><strong>举例：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;千古&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;宿敌&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;南山忆&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;素颜&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> bool1 <span class="token operator">=</span> arr1<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> index<span class="token punctuation">,</span> array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bool1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false</span>


<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;千古&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;宿敌&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;南山&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;素颜&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> bool2 <span class="token operator">=</span> arr2<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> index<span class="token punctuation">,</span> array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bool2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//输出结果：true。因为每个元素的长度都是两个字符。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="some"><a href="#some" class="header-anchor">#</a> some()</h3> <p><code>some()</code>：对数组中每一个元素运行回调函数，只要<strong>有一个元素返回 true</strong>，则停止遍历，此<strong>方法返回 true</strong>。</p> <p>注意：<strong>some()方法的返回值是 boolean 值。</strong></p> <h3 id="every-和-some-的使用场景"><a href="#every-和-some-的使用场景" class="header-anchor">#</a> every() 和 some() 的使用场景</h3> <p>every() 和 some() 这两个方法，初学者很容易搞混。要怎么区分呢？你可以这样记：</p> <blockquote><p>every()：<strong>全部真，才为真</strong>。当你需要让数组中的每一个元素都满足指定条件时，那就使用 every()。</p> <p>some()：<strong>一个真，则为真</strong>，点到为止。数组中只要有一个元素满足指定条件时，就停止遍历。那就使用 some()。</p></blockquote> <h3 id="find"><a href="#find" class="header-anchor">#</a> find()</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>作用</strong>：找出<strong>第一个满足「指定条件返回 true」的元素</strong>；如果没找到，则返回 undefined。</p> <p>备注：一旦找到符合条件的第一个元素，将不再继续往下遍历。</p> <p><strong>举例：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index<span class="token punctuation">,</span>arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> item <span class="token operator">&gt;</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token comment">//遍历数组arr，一旦发现有第一个元素大于4，就把这个元素返回</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//打印结果：5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="findindex"><a href="#findindex" class="header-anchor">#</a> findIndex()</h3> <p><strong>语法</strong>：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>findIndex(function(item, index, arr){
    return true;
});
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>作用</strong>：找出<strong>第一个</strong>满足「指定条件返回 true」的元素的 index。</p> <p><strong>举例：</strong></p> <blockquote><p>我们直接把上面的代码中的 find 方法<strong>改成 findIndex</strong>，来看看效果。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index<span class="token punctuation">,</span>arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> item <span class="token operator">&gt;</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token comment">//遍历数组arr，一旦发现有第一个元素大于4，就把这个元素的index返回</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//打印结果：3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>应用</strong></p> <blockquote><p>从我们获取的数据中筛选查找</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> students <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> 
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">&quot;男&quot;</span><span class="token punctuation">,</span> 
        <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span> 
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;夕颜&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">&quot;女&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">&quot;女&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">56</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> femaleStu <span class="token operator">=</span> students<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span>sex <span class="token operator">===</span> <span class="token string">&quot;女&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> femaleStuIndex <span class="token operator">=</span> students<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span>sex <span class="token operator">===</span> <span class="token string">&quot;女&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>femaleStu<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//{name: &quot;夕颜&quot;, sex: &quot;女&quot;, age: 16}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>femaleStuIndex<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="reduce-方法"><a href="#reduce-方法" class="header-anchor">#</a> reduce()方法</h3> <p><strong>reduce() 语法</strong></p> <blockquote><p>reduce 的发音：[rɪ'djuːs]。中文含义是减少，但这个方法跟“减少”没有任何关系。</p></blockquote> <p>reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。返回值是回调函数累计处理的结果。</p> <p><strong>语法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">previousValue<span class="token punctuation">,</span> currentValue<span class="token punctuation">,</span> currentIndex<span class="token punctuation">,</span> arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>    initialValue<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//参数解释：</span>
<span class="token comment">//previousValue：必填，上一次调用回调函数时的返回值</span>

<span class="token comment">//currentValue：必填，当前正在处理的数组元素</span>

<span class="token comment">//currentIndex：选填，当前正在处理的数组元素下标</span>

<span class="token comment">//arr：选填，调用 reduce()方法的数组</span>

<span class="token comment">//initialValue：选填，可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>在以往的数组方法中，匿名的回调函数里是传三个参数：item、index、arr。</p> <p>但是在 reduce() 方法中，前面多传了一个参数<code>previousValue</code>，</p> <p>这个参数的意思是上一次调用回调函数时的返回值。第一次执行回调函数时，previousValue 没有值怎么办？可以用 initialValue 参数传给它。</p> <p><strong>备注：</strong></p> <blockquote><p>绝大多数人在一开始接触 reduce() 的时候会很懵逼，但是没关系，有事没事多看几遍，自然就掌握</p> <p>了。如果能熟练使用 reduce() 的用法，将能替代很多其他的数组方法，并逐渐走上进阶之路，领先于他人。</p></blockquote> <p>为了方便理解 reduce()，我们先来看看下面的简单代码，过渡一下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;夕颜&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;王二麻子&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">prev <span class="token punctuation">,</span> item <span class="token punctuation">,</span> index</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>prev<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token number">88</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span>
<span class="token comment">//0 云牧</span>
<span class="token comment">//88 夕颜</span>
<span class="token comment">//88 王二麻子</span>

<span class="token comment">//上面的代码中，由于return的是固定值，所以 prev 打印的也是固定值（只有初始值是 0，剩下的遍历中，都是打印 88）。</span>

<span class="token comment">//不传递第二个参数 index是从1开始的，第一次的prev的值是数组的第一个值</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;夕颜&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;王二麻子&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">prev<span class="token punctuation">,</span> item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>prev<span class="token punctuation">,</span> item<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 云牧 夕颜 1  88 &quot;王二麻子&quot; 2</span>

    <span class="token keyword">return</span> <span class="token number">88</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>现在来升级一下，</p> <p>实际开发中，<strong>prev 的值往往是动态变化的</strong>，这便是 reduce()的精妙之处。我们来看几个例子就明白了。</p> <h3 id="reduce-的常见应用"><a href="#reduce-的常见应用" class="header-anchor">#</a> reduce() 的常见应用</h3> <p><strong>举例 1</strong></p> <blockquote><p>计算数组中<strong>所有元素项的总和乘积</strong>。代码实现：</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 数组求和</span>
<span class="token keyword">let</span> sum <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">prev<span class="token punctuation">,</span>item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> prev <span class="token operator">+</span> item<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 打印结果：10</span>
<span class="token comment">//数组求乘积</span>
<span class="token keyword">let</span> mul <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">prev<span class="token punctuation">,</span>item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> prev <span class="token operator">*</span> item<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mul<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果：24</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><strong>举例 2</strong></p> <blockquote><p>**统计某个元素出现的次数。**代码实现：</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">repeatCount</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>arr <span class="token operator">||</span> arr<span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">totalCount<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        totalCount <span class="token operator">+=</span> item <span class="token operator">==</span> value <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> totalCount<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">repeatCount</span><span class="token punctuation">(</span>arr1<span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果：3</span>


<span class="token comment">//计算数组中每个元素出现的次数</span>

<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> counts <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">pre<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>item <span class="token keyword">in</span> pre<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        pre<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        pre<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> pre<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counts<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//{2: 2, 3: 1, 4: 1, 10: 3}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p><strong>举例 3</strong></p> <blockquote><p><strong>求元素的最大值</strong>：代码实现：</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 数组求最大值</span>
<span class="token keyword">let</span> maxValue <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">prev<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> prev <span class="token operator">&gt;</span> item <span class="token operator">?</span> prev <span class="token operator">:</span> item<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>maxValue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 打印结果：9</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="数组的方法清单"><a href="#数组的方法清单" class="header-anchor">#</a> 数组的方法清单</h2> <h3 id="数组的类型相关"><a href="#数组的类型相关" class="header-anchor">#</a> 数组的类型相关</h3> <table><thead><tr><th style="text-align:left;">方法</th> <th style="text-align:left;">描述</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Array.isArray()</td> <td style="text-align:left;">判断是否为数组</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">toString()</td> <td style="text-align:left;">将数组转换为字符串</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Array.from(arrayLike)</td> <td style="text-align:left;">将<strong>伪数组</strong>转化为<strong>真数组</strong></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Array.of(value1, value2, value3)</td> <td style="text-align:left;">创建数组：将<strong>一系列值</strong>转换成数组</td> <td style="text-align:left;"></td></tr></tbody></table> <p>注意，获取数组的长度是用<code>length</code>属性，不是方法。</p> <h3 id="数组元素的添加和删除"><a href="#数组元素的添加和删除" class="header-anchor">#</a> 数组元素的添加和删除</h3> <table><thead><tr><th style="text-align:left;">方法</th> <th style="text-align:left;">描述</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">push()</td> <td style="text-align:left;">向数组的<strong>最后面</strong>插入一个或多个元素，返回结果为新数组的<strong>长度</strong></td> <td style="text-align:left;">会改变原数组</td></tr> <tr><td style="text-align:left;">pop()</td> <td style="text-align:left;">删除数组中的<strong>最后一个</strong>元素，返回结果为<strong>被删除的元素</strong></td> <td style="text-align:left;">会改变原数组</td></tr> <tr><td style="text-align:left;">unshift()</td> <td style="text-align:left;">在数组<strong>最前面</strong>插入一个或多个元素，返回结果为新数组的<strong>长度</strong></td> <td style="text-align:left;">会改变原数组</td></tr> <tr><td style="text-align:left;">shift()</td> <td style="text-align:left;">删除数组中的<strong>第一个</strong>元素，返回结果为<strong>被删除的元素</strong></td> <td style="text-align:left;">会改变原数组</td></tr> <tr><td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">slice()</td> <td style="text-align:left;">从数组中<strong>提取</strong>指定的一个或多个元素，返回结果为<strong>新的数组</strong></td> <td style="text-align:left;">不会改变原数组</td></tr> <tr><td style="text-align:left;">splice()</td> <td style="text-align:left;">从数组中<strong>删除</strong>指定的一个或多个元素，返回结果为<strong>被删除元素组成的新数组</strong></td> <td style="text-align:left;">会改变原数组</td></tr> <tr><td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">fill()</td> <td style="text-align:left;">填充数组：用固定的值填充数组，返回结果为<strong>新的数组</strong></td> <td style="text-align:left;">不会改变原数组</td></tr></tbody></table> <h3 id="数组的合并和拆分"><a href="#数组的合并和拆分" class="header-anchor">#</a> 数组的合并和拆分</h3> <table><thead><tr><th style="text-align:left;">方法</th> <th style="text-align:left;">描述</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">concat()</td> <td style="text-align:left;">合并数组：连接两个或多个数组，返回结果为<strong>新的数组</strong></td> <td style="text-align:left;">不会改变原数组</td></tr> <tr><td style="text-align:left;">join()</td> <td style="text-align:left;">将数组转换为字符串，返回结果为<strong>转换后的字符串</strong></td> <td style="text-align:left;">不会改变原数组</td></tr> <tr><td style="text-align:left;">split()</td> <td style="text-align:left;">将字符串按照指定的分隔符，组装为数组</td> <td style="text-align:left;">不会改变原字符串</td></tr></tbody></table> <p>注意，<code>split()</code>是字符串的方法，不是数组的方法。</p> <h3 id="数组排序"><a href="#数组排序" class="header-anchor">#</a> 数组排序</h3> <table><thead><tr><th style="text-align:left;">方法</th> <th style="text-align:left;">描述</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">reverse()</td> <td style="text-align:left;">反转数组，返回结果为<strong>反转后的数组</strong></td> <td style="text-align:left;">会改变原数组</td></tr> <tr><td style="text-align:left;">sort()</td> <td style="text-align:left;">对数组的元素,默认按照<strong>Unicode 编码</strong>，从小到大进行排序</td> <td style="text-align:left;">会改变原数组</td></tr></tbody></table> <h3 id="查找数组的元素"><a href="#查找数组的元素" class="header-anchor">#</a> 查找数组的元素</h3> <table><thead><tr><th style="text-align:left;">方法</th> <th style="text-align:left;">描述</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">indexOf(value)</td> <td style="text-align:left;">从前往后索引，检索一个数组中是否含有指定的元素</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">lastIndexOf(value)</td> <td style="text-align:left;">从后往前索引，检索一个数组中是否含有指定的元素</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">includes(item)</td> <td style="text-align:left;">数组中是否包含指定的内容</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">find(function())</td> <td style="text-align:left;">找出<strong>第一个</strong>满足「指定条件返回 true」的元素</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">findIndex(function())</td> <td style="text-align:left;">找出<strong>第一个</strong>满足「指定条件返回 true」的元素的 index</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">every()</td> <td style="text-align:left;">确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true</td> <td style="text-align:left;">全真才为真。要求每一项都返回 true，最终的结果才返回 true</td></tr> <tr><td style="text-align:left;">some()</td> <td style="text-align:left;">数组中只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true</td> <td style="text-align:left;">一真即真。只要有一项返回 true，最终的结果就返回 true</td></tr></tbody></table> <h3 id="遍历数组"><a href="#遍历数组" class="header-anchor">#</a> 遍历数组</h3> <table><thead><tr><th style="text-align:left;">方法</th> <th style="text-align:left;">描述</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">for 循环</td> <td style="text-align:left;">这个大家都懂</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">forEach()</td> <td style="text-align:left;">和 for 循环类似，但需要兼容 IE8 以上</td> <td style="text-align:left;">forEach() 没有返回值。也就是说，它的返回值是 undefined</td></tr> <tr><td style="text-align:left;">map()</td> <td style="text-align:left;">对原数组中的每一项进行加工，将组成新的数组</td> <td style="text-align:left;">不会改变原数组</td></tr> <tr><td style="text-align:left;">filter()</td> <td style="text-align:left;">过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为<strong>新的数组</strong></td> <td style="text-align:left;">不会改变原数组</td></tr> <tr><td style="text-align:left;">reduce</td> <td style="text-align:left;">接收一个函数作为累加器，返回值是回调函数累计处理的结果</td> <td style="text-align:left;"></td></tr></tbody></table> <p><strong>下面的数组方法改变了原来数组</strong></p> <blockquote><p>arr.push()
arr.unshift()
arr.pop()
arr.shift()
arr.splice()
arr.reverse()
arr.sort()</p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/js/09-作用域,闭包,预解析.html" class="prev">
        09-作用域,闭包,预解析
      </a></span> <span class="next"><a href="/./guide/notes/js/11-字符串.html">
        11-字符串
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/49.3dceda91.js" defer></script>
  </body>
</html>
